<template>
  <view class="activity-container">
    <!-- 学校选择下拉框 -->
    <view class="school-selector">
      <picker mode="selector" :range="schools" range-key="schoolName" @change="onSchoolChange">
        <view class="picker-content">
          <text>{{ schools[selectedSchoolIndex].schoolName }}</text>
          <text class="iconfont icon-arrow-down"></text>
        </view>
      </picker>
    </view>
    <!-- 可滚动区域 -->
    <scroll-view
      scroll-y
      class="scroll-container"
      @scrolltolower="onScrollToLower"
      :lower-threshold="50"
      :show-scrollbar="false"
    >
      <view class="activity-list">
        <navigator
          class="activity-item"
          v-for="(item, index) in activityList"
          :key="index"
          :url="`/pagesActivity/activity-detail/activity-detail?id=${item.activityId}`"
          hover-class="activity-item-hover"
        >
          <view class="activity-item-image">
            <image :src="item.coverImage" mode="aspectFill"></image>
          </view>
          <view class="activity-item-content">
            <view class="activity-item-title">{{ item.title }}</view>
            <view class="activity-item-time">
              <text class="iconfont icon-time"></text>
              <text>{{ item.startTime }} - {{ item.endTime }}</text>
            </view>
            <view class="activity-item-location">
              <text class="iconfont icon-location"></text>
              <text>{{ item.location }}</text>
            </view>
          </view>
        </navigator>
      </view>
      <view class="load-more">{{ finished ? '没有更多数据了~' : '加载中...' }}</view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
// 导入Vue的ref函数
import { getActivityListAPI, type ActivityPage } from '@/services/activity'
import { getSchoolListAPI } from '@/services/home'
import { useMemberStore } from '@/stores'
import type { Activity } from '@/types/activity'
import type { School } from '@/types/home'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

//用户信息
const profile = useMemberStore().profile

// 学校选择列表
const schools = ref<School[]>([{ schoolName: '全部', id: 0 }])
const selectedSchoolIndex = ref<number>(0)
// 获取学校列表
const getSchoolList = async () => {
  const res = await getSchoolListAPI()
  schools.value.push(...res.rows)
  selectedSchoolIndex.value = schools.value.findIndex(
    (item) => item.id === pageParams.value.schoolId,
  )
}

//分页参数
const pageParams = ref<ActivityPage>({
  pageNum: 1,
  pageSize: 5,
  status: 5,
  schoolId: profile?.user.schoolId || 0, // 默认设置为用户的学校,没有认证就用0
} as ActivityPage)

/**获取活动列表数据*/
const activityList = ref<Activity[]>([]) // 活动列表
const finished = ref(false) //数据加载标记
const getActivityList = async () => {
  if (finished.value) return
  const res = await getActivityListAPI(pageParams.value)
  activityList.value.push(...res.rows)
  if (res.rows.length === 0 || activityList.value.length >= res.total) {
    finished.value = true
  } else if (pageParams.value.pageNum) {
    pageParams.value.pageNum++
  }
}

// 学校选择事件
const onSchoolChange = (e: UniHelper.PickerViewOnChangeEvent) => {
  const index = e.detail.value
  selectedSchoolIndex.value = Number(index)
  pageParams.value = {
    pageNum: 1,
    pageSize: 5,
    status: 5,
    schoolId: schools.value[Number(index)].id,
  }
  finished.value = false
  activityList.value = []
  getActivityList()
}

// 滚动触底事件
const onScrollToLower = () => {
  console.log('触发滚动触底事件')
  // 用户将自行实现滚动触底逻辑
  getActivityList()
}

//页面初始化
onLoad(() => {
  getActivityList()
  getSchoolList()
})
</script>

<style lang="scss">
.activity-container {
  padding: 20rpx;
  height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .school-selector {
    margin-bottom: 15rpx;
    flex-shrink: 0;

    .picker-content {
      background-color: #fff;
      padding: 15rpx;
      border-radius: 8rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 26rpx;
    }
  }

  .activity-title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20rpx;
    flex-shrink: 0;
  }

  .scroll-container {
    flex: 1;
    height: 0;
    /* 重要：设置为0，让flex:1生效 */
  }

  .activity-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    padding-bottom: 20rpx;

    .activity-item {
      background-color: #fff;
      border-radius: 10rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      &-hover {
        transform: scale(0.98);
        opacity: 0.9;
      }

      &-image {
        width: 100%;
        height: 200rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      &-content {
        padding: 16rpx;
      }

      &-title {
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &-time {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 8rpx;
        display: flex;
        align-items: center;

        .iconfont {
          margin-right: 6rpx;
        }
      }

      &-location {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        .iconfont {
          margin-right: 6rpx;
          flex-shrink: 0;
        }
      }

      &-desc {
        font-size: 24rpx;
        color: #666;
        line-height: 1.4;
      }
    }
  }

  .load-more {
    text-align: center;
    font-size: 24rpx;
    color: #999;
    padding: 20rpx 0;
  }
}
</style>
